<template>
  <div class="container adopting subscribe">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar left-icon="left"
      title="预约记录" @clickLeft="back" />
    <view class="differ_box" v-for="(item,index) in list" :key="index">
      <view class="differ_box_title">
        {{item.message}}
      </view>
      <view class="differ_box_time">
        {{item.time}}
      </view>
      <view class="differ_box_plus">
        {{item.num}}
      </view>
      <view class="status">
        {{getStatus(item.status)}}
      </view>
    </view>
  </div>
</template>

<script>
  import {
    getAppointLog
  } from '@/api/index.js'
  export default {
    data() {
      return {
        page: 1,
        list: [],
        loading: false,
        finished: false,
        refreshing: false,
        error: false
      }
    },
    onLoad() {
      this.get_list()
    },
    methods: {
      getStatus(val) {
        return val == 1 ? '成功' : val == 2 ? '失败':'匹配中'
      },
      back() {
        uni.navigateBack()
      },
      // 加载数据
      get_list() {
        const vm = this
        if (vm.refreshing) {
          vm.list = []
          vm.page = 1
          vm.refreshing = false
        }
        getAppointLog({
          page: vm.page
        }).then(res => {
          vm.loading = false
          if (res.code === 1) {
            const list = res.data.list
            vm.list = [...vm.list, ...list]
            if (res.data.pages > vm.page) {
              vm.page++
            } else {
              vm.finished = true
            }
          } else {
            vm.error = true
          }
        }, () => {
          vm.loading = false
          vm.error = true
        })
      },
      // 下拉刷新
      onRefresh() {
        // 清空列表数据
        this.finished = false
        this.refreshing = true

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true
        this.get_list()
      }
    }
  }
</script>

<style lang="less" scoped>
  .differ_box {
    position: relative;
    padding: 28rpx 29rpx 28rpx 26rpx;
    margin: 20rpx auto;
    width: 609rpx;
    height: 124rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    box-sizing: border-box;

    .differ_box_title {
      font-size: 25rpx;
      line-height: 25rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }

    .differ_box_time {
      position: absolute;
      top: 80rpx;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }

    .differ_box_plus {
      position: absolute;
      top: 50%;
      right: 29rpx;
      transform: translateY(-50%);
      font-size: 34rpx;
      font-weight: bold;
      color: #ECD489;
    }

    .differ_box_plus1 {
      position: absolute;
      top: 50%;
      right: 29rpx;
      transform: translateY(-50%);
      font-size: 34rpx;
      font-weight: bold;
      color: #DA5959;
    }
    .status{
      position: absolute;
      // top: 50%;
      right: 20rpx;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }
  }
</style>
